<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>腕带充值</title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<script type="text/jscript" th:src="@{/plugin/layui/layui.js}" charset="UTF-8"></script>
		<script type="text/jscript" th:src="@{/plugin/jquery.min.js}"></script>
		<script>
		//营业时间
		
		function showTime() {
		 var	nowtime = new Date();
		 var	year = nowtime.getFullYear();
		 var	month = nowtime.getMonth() + 1;
		 var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
		};
		
	$(function(){
		
		setInterval("showTime()", 1000);
		
		
	})
		
		
		//获取腕带信息方法
		function gettype(){
			var va=$("#wriststrp_id").val();
			//发送ajax请求从仓库中获取腕带类型
			$.post( "[[@{/gettype}]]",
					{wriststrap_id : va},
					function(data){	
						if(data.state==0){	
							$("#message").text('闲置状态') ; return;
						}
						if(data.state==1){	
							$("#message").text('使用状态');return;
						}
						if(data.state==2){	
							$("#message").text('挂失状态');return;
						}
						alert("腕带信息不存在！");return;
					});	
		}
		
		<!-- 点击确定 或者退出绑定事件，字体大小变化模拟按钮  -->
		$(function(){
					
			
			$("#read").mousedown(function(){
				
				$("#read").css("font-size","15px");
				
			})
			$("#read").mouseup(function(){
				
				$("#read").css("font-size","20px");
				
				
				//如果腕带信息不为空;
				if($("#wriststrp_id").val()!=""){
					gettype();
				}else{
					alert("腕带信息不能为空！");
				}
				
			})
			
			//
			$("#ok").mousedown(function(){
				$("#ok").css("font-size","25px");
			});
			
			$("#ok").mouseup(function(){
				$("#ok").css("font-size","35px");
				
				//如果腕带编号为空，提示
				if($("#wriststrp_id").val()==""){
					
					alert("腕带编号不能为空！");return;
				}
				
				//前端验证，充值账号是否为使用状态
				
				if($("#message").val()!="使用状态"){
					alert("非使用状态腕带不能充值"); return;
				}
				
				//前端验证----充值总额是否等于应收金额 
				var realamount=$("#amount").val();
				var num1=$("#cash").val();
				var num2=$("#bankcard").val();
				var num3=$("#alipay").val();
			
				<!--如果为空就不调用parseInt方法避免错误代码  -->
				var recharge=0;
				if(num1!=""){
					recharge+=parseInt(num1);
				}
				if(num2!=""){
					recharge+=parseInt(num2);
				}
				if(num3!=""){
					recharge+=parseInt(num3);
				}
				
				
				if(realamount!=recharge){
					alert("应收金额不符，请重新输入");return;
				}
				
				//alert("运行了");
				
				//点击充值提交,发送金额到后台；
				$.post("[[@{/payamount}]]"
					,{
					cash:num1,
					bankcard:num2,
					alipay:num3,
					wriststrp_id:$("#wriststrp_id").val()
				},
				function(data){
					//alert("进入了");
					//alert("data");
					if(data=="成功"){
						if(confirm("充值办理成功,是否回到主菜单")==true){
							location.href="[[@{/myindex}]]";
						}else{
							
							
						}
					}else{
						alert(data);
					}
				}
				
				)
			});
			
			$("#exit").mousedown(function(){
				$("#exit").css("font-size","25px");
			});
			
			$("#exit").mouseup(function(){
				$("#exit").css("font-size","35px");
			});
			
			$("#card").mousedown(function(){
				$("#card").css("font-size","15px");
			});
			
			$("#card").mouseup(function(){
				$("#card").css("font-size","20px");
			});
			
			$("#aliycard").mousedown(function(){
				$("#aliycard").css("font-size","15px");
			});
			
			$("#aliycard").mouseup(function(){
				$("#aliycard").css("font-size","20px");
			});
			
		})
		
		
		
		<!--param中的值显示  -->
		$(function(){
			
			$("#amount").val("[[${param.amount}]]");
			$("#wriststrp_id").val("[[${param.wid}]]");
			
			//如果有腕带编号回显，加载时候自动获取类型 
			if($("#wriststrp_id").val()!=""){
				gettype();
			}
			
		})
		
		
		<!--重置金额 -->
		function reset(){
			var amount=$("#amount").val("");
		}
		<!--退格-->
		function backspace(){
			var amount=$("#amount").val();
			if(amount!=""){
			var temp=amount.length;
			temp=amount.substring(0,temp-1);
			var amount=$("#amount").val(temp);
			}
			
		}
		
		
		<!-- 输入键盘-->
		function clickNumber1(num){
			
			var amount=$("#amount").val();
			<!-- 判断是否输入的小数点小数点-->
			if(num=="."){
				if(amount==""){
					$("#amount").val("");return;
				}else if(amount.indexOf(".")!=-1){	
					return;
				}else{
					amount=amount+num;
					$("#amount").val(amount);return;
				}
				alert("来了3");
			}
			<!-- 判断是否有小数点-->
			
			
			if(amount==""){
				$("#amount").val(num);
			}else{
				amount=amount+num;
				$("#amount").val(amount);
			}
		}
		<!-- 模拟按键功能，点击div变小-->
		function dosome(num){
			var id="key"+num;
			
			if(id=="key12"){
			document.getElementById(id).style="font-size: 20px; background-color: orange;width: 90%; height: 90%; margin: auto;";return;
			}else if(id=="key10"||id=="key13"){
				document.getElementById(id).style="font-size: 20px; background-color: #01AAED;width: 90%; height: 90%; margin: auto;";return;
			}
			document.getElementById(id).style="font-size: 20px; background-color: #0000FF;width: 90%; height: 90%; margin: auto;";
		}
		function dother(num){
				var id="key"+num;
			if(id=="key12"){
			document.getElementById(id).style="font-size: 25px; background-color: orange;width: 100%; height: 100%; margin: auto;";return;
			}else if(id=="key10"||id=="key13"){
				document.getElementById(id).style="font-size: 25px; background-color: #01AAED;width: 100%; height: 100%; margin: auto;";return;
			}
			document.getElementById(id).style="font-size: 25px; background-color: #0000FF;width: 100%; height: 100%; margin: auto;";
		}
		</script>
	</head>
	<body>
		<!--最外层容器控制位置-->
		<div id="" class="container" style="height:500px; margin: 30px 100px;">
			<div id="" class="layui-row ">

				<!--  左边操作功能模块-->
				<div id="" class="layui-col-md12 layui-bg-gray" style="height: 500px;">
					<div id="" class="layui-row ">
						<!-- 左侧菜单框-->
						<div id="" class="layui-col-md7 " style=" height: 500px;">
							<div id="" class="layui-row" style="height: 140px; text-align: center; line-height: 50px;font-size: 25px; ">
								<div id="" class="layui-col-md6"  style="margin-top: 15px;">
									腕带编号：<input type="text" name=""  id="wriststrp_id" value="" size="8" />
								</div>
								<div id="read" class="layui-col-md2"  style=" margin-top: 15px;font-size: 20px;background-color: blue;color: white; ">
									读取腕带
								</div>
								<div id="" class="layui-col-md4"  style="margin-top: 15px;font-size: 20px; ">
									腕带状态<select><option id="message">读取状态</option></select>
								</div>
								<div id="" class="layui-col-md6"  style="margin-top: 15px;color: red;">
									充值金额：<input type="text" name=""  id="amount" style="color:red;" size="8" />
								</div>
							</div>
							<div id="" class="layui-row" style="border:#01AAED 1px solid;  height: 330px;">
								<div id="" class="layui-col-md12" style="margin-top: 10px;">
									<div id="" class="layui-col-md2" style=" font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										现金：
									</div>
									<div id="" class="layui-col-md2" style="font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										<input type="text" size="7" name="" id="cash" value="100" />
									</div>
								</div>
								<div id="" class="layui-col-md12" style="margin-top: 30px;">
									<div id="" class="layui-col-md2" style="font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										银行卡：
									</div>
									<div id="" class="layui-col-md2" style="font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										<input type="text" size="7" name="" id="bankcard" value="" />
									</div>
									
									<div id="card" class="layui-col-md2" style=" font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										<div id="" style="background-color: #007DDB;">
											刷银行卡
										</div>
									</div>
								</div>
								<div id="" class="layui-col-md12" style="margin-top: 30px;">
									<div id="" class="layui-col-md2" style="font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										支付宝：
									</div>
									<div id="" class="layui-col-md2" style="font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										<input type="text" size="7" name="" id="alipay" value="" />
									</div>
									
									<div id="" class="layui-col-md2" style="font-size: 20px; height: 50px; text-align: center; line-height: 50px;">
										<div id="aliycard" style="background-color: orange;">
											扫描支付码
										</div>
									</div>
								</div>
								<div id="" class="layui-col-md12" style="margin-top: 30px;">
									<div id="ok" class="layui-col-md6"   style="font-size: 35px; height: 50px; text-align: center; line-height: 50px;  ">
										<div id="" style="background-color: #007DDB;width: 150px;margin: auto;">
											确定
										</div>
									</div>
									<div id="exit" class="layui-col-md6" style="font-size: 35px; height: 50px; text-align: center; line-height: 50px;">
										<div id="" style="background-color: #FF5722;  width: 150px;	margin: auto;">
											取消
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- 右侧菜单-->
						<div id="" class="layui-col-md5" style="height: 500px; ">

							<div id="" class="layui-col-md9 layui-col-space5" >
								<div id="" class=" layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key1" onmousedown="dosome(1)" onclick="clickNumber1(1)" onmouseup="dother(1)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">1</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key2" onmousedown="dosome(2)" onclick="clickNumber1(2)" onmouseup="dother(2)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">2</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key3" onmousedown="dosome(3)" onclick="clickNumber1(3)" onmouseup="dother(3)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">3</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key4" onmousedown="dosome(4)" onclick="clickNumber1(4)" onmouseup="dother(4)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">4</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key5" onmousedown="dosome(5)" onclick="clickNumber1(5)" onmouseup="dother(5)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">5</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key6" onmousedown="dosome(6)" onclick="clickNumber1(6)" onmouseup="dother(6)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">6</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key7" onmousedown="dosome(7)" onclick="clickNumber1(7)" onmouseup="dother(7)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">7</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key8" onmousedown="dosome(8)" onclick="clickNumber1(8)" onmouseup="dother(8)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">8</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key9" onmousedown="dosome(9)" onclick="clickNumber1(9)" onmouseup="dother(9)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">9</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md8">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key13" onmousedown="dosome(13)" onclick="clickNumber1(0)" onmouseup="dother(13)" style="background-color: #01AAED;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">0</font>
									</div>
								</div>
							</div>
							<div id="" class="layui-col-md4">
								<div id="" style=" text-align: center;line-height: 115px; height: 115px;">
									<div id="key10" onmousedown="dosome(10)" onclick="clickNumber1('.')" onmouseup="dother(10)" style="background-color: #01AAED;font-size: 25px; width: 100%; height: 100%; margin: auto;">
										<font color="white">.</font>
									</div>
								</div>
							</div>
						</div>
						<div id="" class="layui-col-md3" style="margin-left: 5px;">

							<div style="margin-left: 5px;  text-align: center;line-height: 355px; height: 355px;">
								<div id="key11" onmousedown="dosome(11)" onclick="backspace()" onmouseup="dother(11)" style="background-color: #0000FF;font-size: 25px; width: 100%; height: 100%; margin: auto;">
									<font color="white">退格</font>
								</div>
							</div>
							<div id="" style="margin-left: 5px; margin-top: 5px; text-align: center;line-height: 115px; height: 115px;">
								<div id="key12" onmousedown="dosome(12)" onclick="reset()" onmouseup="dother(12)" style="background-color: orange;font-size: 25px; width: 100%; height: 100%; margin: auto;">
									<font color="white">清除</font>
								</div>
							</div>
						</div>
					</div>


				</div>
			</div>
				<!-- 页脚-->
				<div class="layui-row layui-bg-gray" style="text-align: center;">
					<div id="mytime" class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> </div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 操作用户：yanhui</div>
					<div id="mytime2"  class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"></div>
					<div class="layui-col-md3" style="border: lightblue 1px solid;height: 30px;"> 某某游乐园</div>
				</div>
		</div>

		</div>

	</body>
</html>
